<template>
    <div class="home-box">
        <div class="home-top">
            <div class="home-time">
                <p class="now-time">现在是 {{time.year}} 年 {{time.month}} 月 {{time.day}} 日 星期 {{time.number[time.date]}} {{time.hour}} 时 {{time.minutes}} 分 {{time.second}} 秒</p>
                <p class="now-welcome">欢迎 {{userInfo.name}} 登入系统</p>
                </div>
            <div class="home-icon">
                <div class="one">
                    <div class="one-left"></div>
                    <div class="one-icon">
                        <strong class="one-number">1253</strong>
                        <em>合作企业</em>
                    </div>
                </div>
                <div class="two">
                    <div class="two-left"></div>
                    <div class="one-icon">
                        <strong class="one-number">1795</strong>
                        <em>在售产品</em>
                    </div>
                </div>
                <div class="three">
                    <div class="three-left"></div>
                    <div class="one-icon">
                        <strong class="one-number">1182</strong>
                        <em>订单数量</em>
                    </div>
                </div>
                <div class="four">
                    <div class="four-left"></div>
                    <div class="one-icon">
                        <strong class="one-number">90</strong>
                        <em>取消订单</em>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-bottom">
            <div class="home-total">
                <p>统计分析</p>
                <el-tabs v-model="tabKey">
                    <el-tab-pane label="客户分布统计分析" name="first">
                        <div class="nodeOne" id="nodeOne"></div>
                    </el-tab-pane>
                    <el-tab-pane label="供应商统计分析" name="second">
                        <div class="nodeTwo" id="nodeTwo"></div>
                    </el-tab-pane>
                    <el-tab-pane label="款项统计分析" name="third">
                        <div class="nodeThree" id="nodeThree"></div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="home-pending">
                <p>待办数据</p>
                <el-table
                :span="24"
                :row-style="{height:'30px !important',color:'black',backgroundColor:'#d4eeed' }"
                size="mini"
                height="52.5vh"
                :data="tableData"
                :show-header="false"
                style="width: 100%">
                <el-table-column
                class-name="my-pending"
                prop="pending"
                label="待办数据"
                :show-overflow-tooltip="true"
                width="250">
                </el-table-column>
                <el-table-column
                :row-style="{marginLeft:'20px',color:'red'}"
                label="操作"
                width="100">
                <template >
                    <el-button type="text" size="small">详情</el-button>
                </template>
                </el-table-column>
            </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import Vue from 'vue'
Vue.prototype.$echarts = echarts
export default {
    methods:{
        randomNumber(num){
           let data= Array(num).fill().map((_,i)=>{
                    return Math.floor(Math.random()*900+80)
                })
                return data
        },
        randomNumberTwo(){
            let data= Array(12).fill().map((_,i)=>{
            return (Math.random()*180.5+2).toFixed(1)
            })
            return data
        },
        getTimeEvt(){
            this.time.year=new Date().getFullYear()
            this.time.month=new Date().getMonth()+1
            this.time.day=new Date().getDate()
            this.time.date=new Date().getDay()
            this.time.hour=new Date().getHours()
            this.time.minutes=new Date().getMinutes()
            this.time.second=new Date().getSeconds()
        },
        //也可以用moment.js
        handleClick(){
            console.log('------')
        },
        initEcharts(){
          const optionOne = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                data: ['1月4日', '1月5日', '1月6日', '1月7日', '1月8日', '1月9日', '1月10日']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: '甘草片',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                // data: [320, 332, 301, 334, 390, 330, 320]
                data:this.randomNumber(7)
                },
                {
                name: '阿莫西林',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data:this.randomNumber(7)
                },
                {
                name: '布洛芬',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data:this.randomNumber(7)
                },
                {
                name: '止痛药',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data:this.randomNumber(7)
                },
                {
                name: '葡萄糖',
                type: 'bar',
                data:this.randomNumber(7),
                emphasis: {
                    focus: 'series'
                },
                markLine: {
                    lineStyle: {
                    type: 'dashed'
                    },
                    data: [[{ type: 'min' }, { type: 'max' }]]
                }
                },
                {
                name: '丹皮',
                type: 'bar',
                barWidth: 5,
                stack: 'Search Engine',
                emphasis: {
                    focus: 'series'
                },
                data:this.randomNumber(7)
                },
                {
                name: '藿香',
                type: 'bar',
                stack: 'Search Engine',
                emphasis: {
                    focus: 'series'
                },
                data:this.randomNumber(7)
                },
                {
                name: '精油',
                type: 'bar',
                stack: 'Search Engine',
                emphasis: {
                    focus: 'series'
                },
                data:this.randomNumber(7)
                },
                {
                name: '六味地黄丸',
                type: 'bar',
                stack: 'Search Engine',
                emphasis: {
                    focus: 'series'
                },
               data:this.randomNumber(7)
                }
            ]
                }
           const nodeOneChart = echarts.init(document.getElementById("nodeOne"))
            nodeOneChart.setOption(optionOne)
        },
        initEchartTwo(){
            let dataAxis = ['总', '有', '些', '惊', '奇', '的', '际', '遇', '比', '方', '说', '当', '我', '遇', '见', '你'];
            let data = this.randomNumber(16)
            let yMax = 500;
            let dataShadow = [];
            for (let i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
            }
            const optionTwo={
                title: {
                    text: '供应商统计分析图',
                    subtext: 'Statistical Analysis Chart of Suppliers'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                    inside: true,
                    color: '#fff'
                    },
                    axisTick: {
                    show: false
                    },
                    axisLine: {
                    show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                    show: false
                    },
                    axisTick: {
                    show: false
                    },
                    axisLabel: {
                    color: '#999'
                    }
                },
                dataZoom: [
                    {
                    type: 'inside'
                    }
                ],
                series: [
                    {
                    type: 'bar',
                    showBackground: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                        }
                    },
                    data: data
                    }
                ]
            }
            const nodeTwoChart = echarts.init(document.getElementById("nodeTwo"))
            nodeTwoChart.setOption(optionTwo)
        },
        initEchartThree(){
            const optionThree = {
                title: {
                    text: '款项统计分布图',
                    subtext: 'Statistical distribution chart of funds'
                },
                color:['#91cc75','#5470c6'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Today', 'Yesterday']
                },
                toolbox: {
                    show: true,
                    feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                    type: 'category',
                    // prettier-ignore
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: 'Today',
                    type: 'bar',
                    data:  this.randomNumberTwo(),
                    markPoint: {
                        data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                    },
                    {
                    name: 'Yesterday',
                    type: 'bar',
                    data: this.randomNumberTwo(),
                    markPoint: {
                        data: [
                        // { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        // { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                    }
                ]
                };
            const nodeThreeChart = echarts.init(document.getElementById("nodeThree"))
            nodeThreeChart.setOption(optionThree)
        }
    },
    data() {
        return {
            tabKey: 'first',
            time:{
                year:'',
                month:'',
                day:'',
                date:'',
                hour:'',
                minutes:'',
                second:'',
                number:['日','一','二','三','四','五','六']
            },
            timer:null,
            activeName:'',
            userInfo:{},
            timerOne:null,
            timerTwo:null,
            timerThree:null,
            tableData:[
                {pending:'产品【表柔比星】上架跟进'},
                {pending:'产品【洛美沙星】药品研发审批进度'},
                {pending:'产品【丙戊酸钠】研发部门五一加班'},
                {pending:'产品【氯雷他定】礼品盒的研发进度要提前'},
                {pending:'产品【别嘌醇】礼品盒的研发进度要提前'},
                {pending:'产品【氯膦酸二钠】上架跟进'},
                {pending:'产品【克林霉素】药品研发审批进度'},
                {pending:'产品【克林霉素】礼品盒的研发进度要提前'},
                {pending:'产品【来曲唑】样品研发进度需要跟进'},
                {pending:'产品【赖诺普利】上架跟进'},
                {pending:'产品【赖脯胰岛素】样品研发进度需要跟进'},
                {pending:'产品【丙戊酸钠】研发部门五一加班'}
                ]
        }
    },
    watch: {
        immediate:true,
        tabKey(val) {
            if (val === 'first') {
                // this.tabKey='first'
                if (this.timerOne) clearInterval(this.timerOne)
                setTimeout(() => {
                    this.timerOne=setInterval(()=>{
                        this.initEcharts()
                    },2000)
                    this.initEcharts()
                },200)
            }
            else if(val === 'second'){
                // this.tabKey='second'
                if (this.timerTwo) clearInterval(this.timerTwo)
                setTimeout(()=>{
                    this.timerTwo=setInterval(()=>{
                        this.initEchartTwo()
                    },2000)
                    this.initEchartTwo()
                },200)
            }
            else if(val === 'third'){
                // this.tabKey='third'
                if (this.timerThree) clearInterval(this.timerThree)
                setTimeout(()=>{
                    this.timerThree=setInterval(()=>{
                        this.initEchartThree()
                    },2000)
                    this.initEchartThree()
                },200)
            }
        }
    },
    mounted(){
        if (this.tabKey === 'first') {
                if (this.timerOne) clearInterval(this.timerOne)
                setTimeout(() => {
                    this.timerOne=setInterval(()=>{
                        this.initEcharts()
                    },2000)
                    this.initEcharts()
                },200)
            }
            else{
                clearInterval(this.timerOne)
            }
        this.timer =setInterval(()=>{
            this.getTimeEvt()
        },1000)
        this.userInfo=this.$store.getters['common/userInfo']
        // this.initEcharts()
    },
    destroyed() {
        clearInterval(this.timer)
        clearInterval(this.timerOne)
        clearInterval(this.timerTwo)
        clearInterval(this.timerThree)
    },
}
</script>

<style lang="less">
    .home-box {
        display: block;
        height: 100%;
        .home-top{
            width: 100%;
            height: 10vh;
            display: flex;
            .home-time{
                flex: 0 0 38vw;
                line-height: 1.5vh;
                .now-time{
                    color: #1775bc;
                    font-size: .9rem;
                }
                .now-welcome{
                    color: black;
                    font-size: .7rem;
                }
                
            }
            .home-icon{
                flex: 0 0 calc(100% - 38vw);
                flex-wrap: nowrap;
                height: 10vh;
                display: flex;
                .one,
                .two,
                .three,
                .four{
                    flex: 1;
                    border-right: 1px solid rgb(159, 154, 154);
                    height: 6vh;
                    margin: auto;
                    display: flex;
                    justify-content: space-between;
                    .one-left,
                    .two-left,
                    .three-left,
                    .four-left{
                        width:45px;
                        height: 45px;
                        margin: auto;
                        background: url('../../images/aixin.png') center center / 100% 100% no-repeat;
                    }
                    .two-left{
                        background-image: url('../../images/zaishou.png');
                        background-size: 44px 44px;
                    }
                    .three-left{
                        background-image: url('../../images/orderNum.png');
                    }
                    .four-left{
                        background-image: url('../../images/cancelOrder.png');
                        background-size: 40px 40px;
                    }
                     .one-icon{
                        width: 80px;
                        height: 6vh;
                        strong{
                            display: block;
                            height: 26px;
                            font-size: 1.1rem;
                            color: #1775bc;
                            font-weight: bolder;
                        }
                        em{
                            display: block;
                            line-height: 20px;
                            font-size: .65rem;
                            color: #666;
                            font-style: normal;
                            padding-left: 2px;
                        }
                     }
                }
                .four{
                    border:none;
                }
            }
        }
        .home-bottom{
            width: 100%;
            height: calc(100% - 10vh);
            display: flex;
            .home-total{
                flex: 1;
                border: 1px solid white;
                background: white;
                margin-right: 10px;
                p{
                    display: block;
                    height: 2vh;
                    font-size: .8rem;
                    padding-left: 10px;
                }
                .el-tabs{
                    width: 98%;
                    height: calc(100% - 6.5vh);
                    margin: auto;
                    .el-tabs__header{
                        margin-bottom: 0 !important;
                    }
                    .el-tab-pane{
                        width: 100%;
                        height: 100%;
                    }
                    .el-tabs__content{
                        width: 100%;
                        height: 95%;
                        margin-top: 5px;
                        .nodeOne{
                            margin-top: 0;
                            width: 95%;
                            height: 92%;
                            margin: auto;
                        }
                        .nodeTwo{
                            margin-top: 0;
                            width: 100%;
                            height: 100%;
                            margin: auto;
                        }
                        .nodeThree{
                            margin-top: 0;
                            width: 100%;
                            height: 100%;
                            margin: auto;
                        }

                    }
                }
            }
            .home-pending{
                flex:0 0 350px;
                background: #d4eeed;
                p{
                    font-size: .8rem;
                    display: block;
                    height: 50px;
                    line-height: 50px;
                    padding-left: 10px;
                    background: #d4eeed;
                    color: black;
                    margin: 0;
                }
            }
        }
    }
    .my-pending,
    .el-table__cell{
        height: 30px !important;
        width: 250px !important;
        padding: 0 !important;
        .cell,
        .el-tooltip{
            width: 250px !important;
            &:hover{
                cursor: pointer;
            }
        }
        .el-table__body{
            height: 399px !important;
        }
    }
    
</style>